<template>
	<view class="pages">
		<com-head textTit="搜索" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<!-- 搜索 -->
		<view class="serchBox">
			<view class="serch">
				<u-icon name="search" color="#999999" size="30"></u-icon>
				<input type="text"  @input="serchList()" v-model.trim="title"  value="" placeholder="搜索商品名称" placeholder-style="color:#999999"/>
			</view>
			<!-- <view class="shopCar" @click="utlis.goUrl(`/pages/shop/shopCar`)">
				<image src="../../static/img/car.png" mode=""></image>
				<view class="num" v-if="goodsCarNum">{{goodsCarNum}}</view>
			</view> -->
		</view>
		<view class="goods-box" v-if="isHint">
			<view v-for="(ele,index) in list" class="goods-box-view" :key="index" @click="utlis.goUrl(`/pages/shop/shopInfo?goods_id=${ele.id}`)">
				<image :src="ele.picture[0]" mode="aspectFill"></image>
				<view>{{ele.title}}</view>
			</view>
			<u-loadmore margin-top="10" margin-bottom="20" :status="status" :load-text="loadText"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadText: {
					loading: '努力加载中',
					nomore: '没有查询到更多了'
				},
				time: "",
				isHint:false,
				list:[],
				title:'',
				status:'loading',
				total:0,
				page:1,
				scrollTop: 0
			};
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getList();
			}
		},
		methods:{
			// 搜索商品
			serchList(){
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					this.getList()
				}, 800);
			},
			async getList(){
				if(this.title){
					let {data,code} = await this.$u.api.getGoods({title:this.title,page:this.page,store_id:this.store_id});
					if(code){
						if(this.page == 1 && !data.data.lenght){
							this.status = 'nomore';
						}
						this.list = [...this.list, ...data.data];
						this.list.forEach((ele)=>{
							ele.picture =ele.picture.split(',')
						})
						this.total = data.total;
						if (this.total <= this.list.length) this.status = 'nomore';
						else this.status = 'loading';
						this.isHint = true
					}
				}else{
					this.list = []
					this.isHint = false
					this.xin.Toast("商品名称不能为空！")
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f7fa;
	}
</style>
<style lang="scss" scoped>
.pages{
	padding: 50rpx 30rpx;
	.serchBox{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		
		input{
			flex: 1;
			color: #333;
			font-size: 30rpx;
			margin-left: 22rpx;
			height: 100%;
		}
		
		
		.serch{
			width: 100%;
			height: 72rpx;
			background: rgba(255, 255, 255, 0.4);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			padding: 0 46rpx;
			margin-bottom: 30rpx;
			box-shadow: 0px 2rpx 10rpx 0px rgba(0,0,0,0.07); 
			margin-top: 20rpx;
			u-icon{
				position: absolute;
				left: 26rpx;
				top: 25rpx;
			}
		}
		.shopCar{
			width: 88rpx;
			height: 88rpx;
			background: #ffffff;
			border-radius: 60rpx;
			box-shadow: 0px 2rpx 10rpx 0rpx rgba(0,0,0,0.07); 
			position: relative;
			image{
				width: 24rpx;
				height: 24rpx;
				position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
				z-index: 99;
			}
			.num{
				width: 36rpx;
				height: 36rpx;
				background: #b23213;
				border-radius: 50%;
				text-align: center;
				line-height: 36rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: -10rpx;
			}
		}
	}
	.goods-box{
		font-size: 28rpx;
		font-weight: 400;
		color: #071529;
		margin-top: 15rpx;
		&-view{
			background: white;
			padding: 24rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
		}
		image{
			width: 70rpx;
			height: 70rpx;
			border-radius: 8rpx;
			margin-right: 38rpx;
		}
		>view{
			display: flex;
			align-items: center;
			padding-bottom: 40rpx;
		}
	}
}
</style>
